<template>
  <div>
    <div
      class="index_pop_center_status"
      style="position: absolute; top: 50px; width: 100%; padding: 35px"
    >
      <div style="display: flex">
        <div style="width: 50%">
          <video
            ref="videoElement"
            controls
            muted
            autoplay
            style="width: 100%; height: 220px"
          ></video>
          <div v-if="error" class="error">{{ error }}</div>
        </div>
        <div
          style="
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: 10px;
            width: 50%;
            align-items: center;
          "
        >
          <div
            v-for="(item, index) in dataList"
            :key="index"
            style="text-align: center"
          >
            <!-- 你的内容 -->
            <div
              style="
                display: flex;
                justify-content: center;
                flex-direction: column;
                text-align: center;
                align-items: center;
              "
            >
              <div class="status_top">
                <div>
                  <span
                    id="elevStatus"
                    class="elevStatus"
                    style="
                      -webkit-text-stroke: 0.5px rgb(25, 255, 171);
                      border: 1px solid #2cc8ff;
                      display: block;
                      width: 50px;
                      height: 50px;
                      text-align: center;
                      align-content: center;
                    "
                    >{{ item.number }}</span
                  >
                  <p style="top: 5px; left: 5px; width: 10px"></p>
                  <p style="bottom: 5px; left: 5px; width: 10px"></p>
                  <p style="top: 5px; left: 35px; width: 10px"></p>
                  <p style="bottom: 5px; left: 35px; width: 10px"></p>
                </div>
              </div>
              <div class="status_bottom" style="margin-top: 10px">
                {{ item.title }}
              </div>
            </div>
          </div>
        </div>
      </div>
      <div>
        <div class="info_title">
          <div class="info_title_label" style="elevStatus">电梯基础资料</div>
          <div class="info_title_icon">
            <p></p>
            <p></p>
            <p></p>
            <p></p>
            <p></p>
            <p></p>
            <p></p>
            <p></p>
            <p></p>
            <p></p>
            <p></p>
          </div>
        </div>
        <div>
          <div class="info_content">
            <div>
              <p>救援编码：</p>
              <div>
                <p id="pop_rescue_code">
                  {{ details.rescueIdentificationCode }}
                </p>
                <p></p>
                <p></p>
                <p></p>
                <p></p>
              </div>
            </div>
            <div>
              <p>注册代码：</p>
              <div>
                <p id="pop_elev_code">{{ details.registrationCode }}</p>
                <p></p>
                <p></p>
                <p></p>
                <p></p>
              </div>
            </div>
            <div class="info_content_location">
              <p>安装位置：</p>
              <div>
                <p id="pop_location">{{ details.installationLocation }}</p>
                <p></p>
                <p></p>
                <p></p>
                <p></p>
              </div>
            </div>
            <div>
              <p>电梯品牌：</p>
              <div>
                <p id="pop_elev_brand">{{ details.brandName }}</p>
                <p></p>
                <p></p>
                <p></p>
                <p></p>
              </div>
            </div>
            <div>
              <p>电梯类型：</p>
              <div>
                <p id="pop_elev_type">{{ details.installationLocation }}</p>
                <p></p>
                <p></p>
                <p></p>
                <p></p>
              </div>
            </div>
            <div>
              <p>制造单位：</p>
              <div>
                <p id="pop_produce_unit">{{ details.installationLocation }}</p>
                <p></p>
                <p></p>
                <p></p>
                <p></p>
              </div>
            </div>
            <div>
              <p>所属项目：</p>
              <div>
                <p id="pop_elev_area">
                  {{ details.customerCorporationProjectName }}
                </p>
                <p></p>
                <p></p>
                <p></p>
                <p></p>
              </div>
            </div>
            <div>
              <p>制造日期：</p>
              <div>
                <p id="pop_produce_date">{{ details.installationLocation }}</p>
                <p></p>
                <p></p>
                <p></p>
                <p></p>
              </div>
            </div>
            <div>
              <p>维保单位：</p>
              <div>
                <p id="pop_service_unit">
                  {{ details.maintenanceCorporationName }}
                </p>
                <p></p>
                <p></p>
                <p></p>
                <p></p>
              </div>
            </div>
            <div>
              <p>维保人员：</p>
              <div class="info_content_maintenance_people">
                <p id="pop_service_person">
                  {{ details.maintenanceCorporationPrincipal }}
                </p>
                <p></p>
                <p></p>
                <p></p>
                <p></p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, reactive, onMounted, onUnmounted, watch } from "vue";
import { queryByRegCode, getRealtimeStatus, queryPlayUrlLis } from "@/api";

import flvjs from "flv.js";

const param = defineProps(["registrationCode"]);
const dataList = ref([
  {
    icon: "",
    title: "当前状态",
    number: "",
  },
  {
    icon: "",
    title: "运行方式",
    number: "",
  },
  {
    icon: "",
    title: "方向",
    number: "",
  },
  {
    icon: "",
    title: "楼层",
    number: "",
  },
  {
    icon: "",
    title: "电源状态",
    number: "",
  },
  {
    icon: "",
    title: "速度",
    number: "",
  },
  {
    icon: "",
    title: "开关门",
    number: "",
  },
  {
    icon: "",
    title: "是否有人",
    number: "",
  },
  {
    icon: "",
    title: "故障",
    number: "",
  },
  {
    icon: "",
    title: "更新时间",
    number: "",
  },
]);
let pollTimer = null; // 存储定时器ID，用于清除
const details = ref({
  elevatorId: "",
  rescueIdentificationCode: "", //救援码
  registrationCode: "", //注册代码
  elevatorOwnerProjectId: "",
  installationLocation: "", //安装位置
  maintenanceType: "", //维保类型
  customerCorporationProjectName: "", //所属项目
  maintenanceCorporationName: "", //维保单位
  maintenanceCorporationPrincipal: "", //维保负责人
  usingElevatorCorporationName: "", //使用单位
  brandName: "", //电梯品牌
  useStatus: "", //使用状态
  offlineReason: "", //离线原因
  usePlaceType: "", //使用场所
  customerCorporationName: "",
  longitude: null,
  latitude: null,
});
const init = () => {
  // console.log(param.registrationCode);

  getRealtimeStatus({
    registrationCode: param.registrationCode,
  }).then((r) => {
    // console.log("打印电梯数据", r.data);
    const apiData = r.data; // 实际使用时替换为你的接口返回数据
    dataList.value.forEach((item) => {
      switch (item.title) {
        case "当前状态":
          item.number = apiData.status.replace("电梯状态：", "").trim();
          break;
        case "运行方式":
          item.number = apiData.runStatus;
          break;
        case "方向":
          item.number = apiData.isUp.replace("方向：", "").trim();
          break;
        case "楼层":
          item.number = apiData.floor.replace("传感器楼层：", "").trim();
          break;
        case "电源状态":
          item.number = apiData.serviceMode;
          break;
        case "速度":
          item.number = apiData.speed.replace("当前速度:", "").trim();
          break;
        case "开关门":
          item.number = apiData.openDoorStatus ? "开门" : "关门";
          break;
        case "是否有人":
          item.number = apiData.hasPerson === "1" ? "有人" : "无人";
          break;
        case "故障":
          item.number = apiData.entranceStatus.trim() || "无故障";
          break;
        case "更新时间":
          item.number = apiData.updateTime.split(" ")[1];
          break;
      }
    });
    // console.log(dataList.value);

    // dataList.value = r.data;
    // option.value.series[0].data = Object.values(r.data);
    // // option.value.series[0].data = Object.values(r.data).map(value => value + 20);
    // console.log(33333, option.value.series[0].data);
  });
};
const videoElement = ref(null);
const flvPlayer = ref(null);
const error = ref(null);
onMounted(async () => {
  try {
    const res = await queryPlayUrlLis({
      registrationCode: param.registrationCode,
    });
    console.log(res.data.content);

    if (flvjs.isSupported()) {
      flvPlayer.value = flvjs.createPlayer({
        type: "flv",
        url: res.data.content[0].HttpFlvUrl,
        isLive: false, // 直播流需开启
        hasAudio: true, // 根据实际需求调整
        hasVideo: true,
      });

      flvPlayer.value.attachMediaElement(videoElement.value);
      flvPlayer.value.load();
      flvPlayer.value.play().catch((e) => {
        error.value = `播放失败: ${e.message}`;
      });
    } else {
      error.value = "当前浏览器不支持 flv.js";
    }
    console.log(res);
  } catch (error) {}
  await request();
  // pollTimer = setInterval(await init, 3000); // 每3秒轮询
});
const request = async () => {
  try {
    const res = await queryByRegCode({
      registrationCode: param.registrationCode,
    });
    details.value = res.data;
  } catch (error) {}

  await init();
};
watch(() => param.registrationCode, request);

onUnmounted(() => {
  clearInterval(pollTimer); // 组件卸载时清除定时器
  if (flvPlayer.value) {
    flvPlayer.value.pause();
    flvPlayer.value.unload();
    flvPlayer.value.destroy();
  }
});
</script>
<style>
body {
  --bs: 0.666667;
  width: calc(var(--bs) * 1920px);
  /* height: calc(var(--bs) * 1080px); */
}
</style>
<style scoped>
.error {
  color: red;
  margin-top: 10px;
}

.elevStatus p {
  position: absolute;
  border-top: 2px solid #2cc8ff;
  border-right: 2px solid #2cc8ff;
}

.info_title {
  display: flex;
  /* width: 80%; */
}

.info_title_icon {
  display: flex;
  margin-left: 50px;
}

.info_title_label {
  border-top: 1px solid #2cc8ff;
}

.info_title_icon p {
  width: 5px;
  height: 20px;
  margin-left: 10px;
  transform: skew(30deg);
  -webkit-transform: skew(30deg);
  -moz-transform: skew(30deg);
  -o-transform: skew(30deg);
  -ms-transform: skew(30deg);
  background: #2cc8ff;
}

.info_content {
  font-size: 12px !important;
  display: grid;
  grid-template-columns: repeat(3, 1fr);

  /* display: flex; */
  /* flex-wrap: wrap; 关键：允许换行 */
}

.info_content > div {
  /* flex: 0 0 calc(33.333% - 10px); 3列布局，考虑间隙 */
  display: flex;
  /* margin-top: calc(var(--bs) * 60px); */
  margin-top: 30px;
}

.info_content > div > p:nth-of-type(1) {
  width: calc(var(--bs) * 100px);
  height: calc(var(--bs) * 80px);
  line-height: calc(var(--bs) * 80px);
}

.info_content > div > div {
  position: relative;
  width: 80%;
  height: calc(var(--bs) * 80px);
  line-height: calc(var(--bs) * 80px);
  padding-left: calc(var(--bs) * 10px);
  box-shadow: 0px 0px calc(var(--bs) * 24px) 0px rgba(1, 151, 207, 0.25);
  border-radius: calc(var(--bs) * 12px);
  font-size: calc(var(--bs) * 15px);
}

.info_content_location > div {
  /* width: calc(var(--bs) * 780px) !important; */
}

.info_content > div > div > p:nth-of-type(2) {
  position: absolute;
  width: calc(var(--bs) * 12px);
  height: calc(var(--bs) * 12px);
  top: calc(var(--bs) * -2px);
  left: calc(var(--bs) * -2px);
  border-top-left-radius: 12px;
  -webkit-border-top-left-radius: 12px;
  border-top: 2px solid #2cc8ff;
  border-left: 2px solid #2cc8ff;
}

.info_content > div > div > p:nth-of-type(3) {
  position: absolute;
  width: calc(var(--bs) * 12px);
  height: calc(var(--bs) * 12px);
  top: calc(var(--bs) * -2px);
  right: calc(var(--bs) * -2px);
  border-top-right-radius: 12px;
  -webkit-border-top-right-radius: 12px;
  border-top: 2px solid #2cc8ff;
  border-right: 2px solid #2cc8ff;
}

.info_content > div > div > p:nth-of-type(4) {
  position: absolute;
  width: calc(var(--bs) * 12px);
  height: calc(var(--bs) * 12px);
  bottom: calc(var(--bs) * -2px);
  left: calc(var(--bs) * -2px);
  border-bottom-left-radius: 12px;
  -webkit-border-bottom-left-radius: 12px;
  border-bottom: 2px solid #2cc8ff;
  border-left: 2px solid #2cc8ff;
}

.info_content > div > div > p:nth-of-type(5) {
  position: absolute;
  width: calc(var(--bs) * 12px);
  height: calc(var(--bs) * 12px);
  bottom: calc(var(--bs) * -2px);
  right: calc(var(--bs) * -2px);
  border-bottom-right-radius: 12px;
  -webkit-border-bottom-right-radius: 12px;
  border-bottom: 2px solid #2cc8ff;
  border-right: 2px solid #2cc8ff;
}

.info_content_maintenance_people {
  /* width: calc(var(--bs) * 1010px) !important; */
}
</style>
